<!--  -->
<template>
  <div class=''>
    <!-- <div style="display: flex;justify-content: space-around;"> -->
      <!-- 左侧列表区 -->
    <div class="content">
      <div style="width: 100%;height: 300px;border: 1px solid transparent;"> <img src="./../../assets/images/3.jpg" alt="" style="width: 100%;height:100%"></div>
      <el-divider content-position="center">国防知识</el-divider>
     <div class="info" v-for="(item,index) in arr " :key="index">
  
      <div style="display:flex" > <div class="circle"></div> <span style="color:#666666;cursor: pointer;" @click="jumpDesc(item)">{{ item.title }}</span></div>
      <div style="color:#999999">{{ item.addtime }}</div>
      
     </div>
  
     <el-pagination
      background
    :page-size="formInline.pageSize"
    layout="prev, pager, next"
    :total="formInline.total">
  </el-pagination>
    </div>
    <!-- 分页 -->
   
    <!-- 右侧快捷信息区 -->
    <!-- <div class="right"></div> -->
    <!-- </div>  -->
  </div>
  </template>
  
  <script>
  import {getNationalDesList} from '@/api'
  export default {
    components: {},
    data  () {
      return {
        arr:[],
        pageNum:10,
        pageSize:20,
        total:100,
        formInline: {
          current: 1,
          size: 10,
          total: 10,
          title:''
        }
      }
    },
    computed: {},
    watch: {},
    methods: {
     getData(){
      getNationalDesList(this.formInline).then(res=>{
        console.log(res)
        this.arr=res.result.records
      })
       let res={
         count:100,
         result:[
          {
            id:'1',
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
              id:'2',
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
              id:'3',
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          }
          ,  {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          },
            {
            title:'你好',
            addtime:'2022-4-2 12:11:23'
          }
        
        ],
         pageSize:20,
         pageNum:1
       }
       this.arr= res.result
       this.pageNum=res.pageNum,
       this.pageSize=res.pageSize,
       this.total=res.count
     },
     jumpDesc(par){
      console.log(par)
      this.$router.push({name: 'page8', params: {key: par}})
     }
    },
    created  () {
  
    },
    mounted  () {
     this.getData()
    },
    beforeCreate  () {},
    beforeMount  () {}, 
    beforeUpdate  () {},
    updated  () {}, 
    beforeDestroy  () {}, 
    destroyed  () {},
    activated  () {} 
  }
  </script>
  <style  scoped>
  .content{
    width:80%;
    height:700px;
    margin:  0 auto;
    /* border:1px solid red; */
  }
  .right{
    width:30%;
    /* height:700px; */
    border: 1px solid red;
  }
  .info{
    width:100%;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
    margin: 15px 0;
  line-height: 30px;
  background: #f8f8f8;
  padding: 10px 0;
  
  }
  .circle{
    width:5px;
    height:5px;
    border-radius:50% ;
    background: #666;
    margin: 12px 8px;
  }
  </style>